<template>
  <div class="map-container">
    <!-- 搜索输入框 -->
    <el-form :model="form" label-width="100px" label-position="right">
      <el-form-item label="地址搜索">
        <el-autocomplete
          v-model="searchKeyword"
          type="text"
          placeholder="请输入地址关键字"
          style="width: 100%"
          clearable
          :fetch-suggestions="handleSearch"
          @clear="handleClear"
          @select="handleSelectResult"
        />
        <!-- style="width: 750px; margin-right: 10px" -->
        <!-- <el-button class="btn-search" @click="handleSearch">搜索</el-button> -->
      </el-form-item>
      <el-form-item label="选中地址">
        <el-input
          v-model="selectedAddress"
          type="text"
          style="width: 750px; margin-right: 10px"
          :readonly="true"
        />
      </el-form-item>
      <el-form-item label="经度纬度">
        <el-input
          v-model="longitudeLatitude"
          type="text"
          style="width: 750px; margin-right: 10px"
          :readonly="true"
        />
      </el-form-item>
    </el-form>
    <!-- 搜索结果列表 -->
    <!-- <div v-if="searchResults.length > 0" class="search-result">
      <ul>
        <li
          v-for="(item, index) in searchResults"
          :key="index"
          @click="handleSelectResult(item)"
        >
          {{ item.name }} - {{ item.address }}
        </li>
      </ul>
    </div> -->

    <!-- 地图容器 -->
    <div id="mapContainer" class="map" />
  </div>
</template>

<script>
export default {
  name: "AmapSearch",
  data() {
    return {
      form: {},
      map: null,
      placeSearch: null,
      searchKeyword: "", // 搜索关键词
      selectedAddress: "", // 选中地址
      longitudeLatitude: "", // 经纬度
      searchResults: [], // 搜索结果
      userLocation: null, // 存储用户位置
    };
  },
  props: {
    addressDialog: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    addressDialog(val) {
      if (val) {
        this.searchKeyword = "";
        this.selectedAddress = ""; // 选中地址
        this.longitudeLatitude = ""; // 经纬度
        this.searchResults = []; // 搜索结果
        // 初始化地图
        this.initMap();
        // 初始化搜索插件
        this.initSearch();
      }
    },
  },
  mounted() {
    // 初始化地图
    this.initMap();
    // 初始化搜索插件
    this.initSearch();
  },
  beforeDestroy() {
    // 销毁地图实例，释放资源
    if (this.map) {
      this.map.destroy();
    }
  },
  methods: {
    // 初始化地图
    initMap() {
      if (window.AMap) {
        this.map = new window.AMap.Map("mapContainer", {
          zoom: 13,
          center: [123.431479, 41.805689], // 初始中心点坐标（沈阳）
          resizeEnable: true,
        });

        // 添加地图控件
        window.AMap.plugin(["AMap.ToolBar"], () => {
          this.map.addControl(
            new window.AMap.ToolBar({
              position: "RB",
            })
          );
        });

        // 添加地图点击事件监听
        this.addMapClickListener();

        // 调用获取用户位置的方法
        this.map.on("complete", () => {
          this.getUserLocation();
        });
      } else {
        console.error("高德地图SDK加载失败");
      }
    },

    // 添加地图点击事件监听
    addMapClickListener() {
      // 监听地图点击事件
      this.map.on("click", (e) => {
        this.handleMapClick(e.lnglat);
      });
    },

    // 处理地图点击事件
    handleMapClick(lnglat) {
      // 清除之前的所有标记
      this.map.clearMap();

      // 在点击位置添加标记
      new window.AMap.Marker({
        position: [lnglat.lng, lnglat.lat],
        map: this.map,
        title: "选中的位置",
      });

      // 更新选中位置信息
      this.userLocation = [lnglat.lng, lnglat.lat];
      this.longitudeLatitude = `${lnglat.lat.toFixed(6)}, ${lnglat.lng.toFixed(
        6
      )}`;

      // 获取并显示地址信息
      this.getAddressFromLocation(lnglat);
    },

    // 根据经纬度获取地址信息
    getAddressFromLocation(lnglat) {
      if (!lnglat || !lnglat.lng || !lnglat.lat) {
        this.selectedAddress = "无效的位置信息";
        return;
      }
      window.AMap.plugin(["AMap.Geocoder"], () => {
        const geocoder = new window.AMap.Geocoder();
        geocoder.getAddress([lnglat.lng, lnglat.lat], (status, result) => {
          if (status === "complete" && result.info === "OK") {
            const address = result.regeocode.formattedAddress;
            this.selectedAddress = address;
            // 获取省市区镇信息
            const addressComponent = result.regeocode.addressComponent;
            const province = addressComponent.province || "";
            const city = addressComponent.city || "";
            const district = addressComponent.district || "";
            const township = addressComponent.township || "";

            // 可以通过事件将这些信息传递给父组件
            this.$emit("updateLocation", {
              address: this.selectedAddress,
              longitudeLatitude: this.longitudeLatitude,
              province: province,
              city: city,
              district: district,
              township: township,
            });
          } else {
            this.selectedAddress = "无法获取地址信息";
          }
        });
      });
    },

    // 初始化搜索插件
    initSearch() {
      // 异步加载地点搜索插件
      window.AMap.plugin(["AMap.PlaceSearch"], () => {
        // 创建地点搜索实例
        this.placeSearch = new window.AMap.PlaceSearch({
          pageSize: 10, // 每页结果数
          pageIndex: 1, // 当前页码
          city: "全国", // 搜索城市，默认全国
          map: this.map, // 关联的地图实例
          panel: false, // 不使用默认面板
        });
      });
    },

    // 处理搜索
    handleSearch(queryString, callback) {
      // 检查placeSearch是否已初始化
      if (!this.placeSearch) {
        callback([]);
        return;
      }

      if (!queryString || !queryString.trim()) {
        callback([]);
        return;
      }

      // 执行搜索
      this.placeSearch.search(queryString.trim(), (status, result) => {
        if (status === "complete" && result.info === "OK") {
          // 处理搜索结果并转换为autocomplete需要的格式
          const suggestions = result.poiList.pois.map((item) => ({
            value: item.name + " - " + item.address, // 显示在下拉列表中的值
            name: item.name,
            address: item.address,
            location: item.location, // 经纬度信息
          }));
          callback(suggestions);
        } else {
          callback([]);
          console.error("搜索失败:", result);
        }
      });
    },

    // 处理清空事件
    handleClear() {
      this.searchKeyword = "";
      // 可以在这里添加其他清空逻辑
    },

    // 处理选择搜索结果
    handleSelectResult(item) {
      // 移动地图到选中地点
      this.map.setCenter([item.location.lng, item.location.lat]);

      // 在选中地点添加标记
      this.map.clearMap(); // 清除现有标记
      new window.AMap.Marker({
        position: [item.location.lng, item.location.lat],
        map: this.map,
        title: item.name,
      });
      this.selectedAddress = item.name;
      this.longitudeLatitude = `${item.location.lat.toFixed(
        6
      )}, ${item.location.lng.toFixed(6)}`;
      // 获取并显示地址信息
      this.getAddressFromLocation(item.location);
      // 隐藏搜索结果
      this.searchResults = [];
    },
    // 获取用户当前位置
    getUserLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            const { longitude, latitude } = position.coords;
            this.userLocation = [longitude, latitude];
            this.setMapCenterToUserLocation();
          },
          (error) => {
            console.warn(
              "无法获取您的位置:",
              error.message,
              "错误码:",
              error.code
            );
          },
          {
            enableHighAccuracy: false, // 默认使用低精度，提高成功率
            timeout: 5000, // 缩短超时时间
            maximumAge: 600000, // 使用10分钟内的缓存位置
          }
        );
      } else {
        console.warn("浏览器不支持地理定位");
        this.setMapCenterToDefault();
      }
    },

    // 使用低精度快速定位的方法
    getUserLocationWithLowAccuracy() {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { longitude, latitude } = position.coords;
          this.userLocation = [longitude, latitude];
          this.setMapCenterToUserLocation();
        },
        (error) => {
          this.setMapCenterToDefault();
        },
        {
          enableHighAccuracy: false, // 关闭高精度
          timeout: 3000, // 更短的超时时间
          maximumAge: 600000, // 使用10分钟内的缓存
        }
      );
    },
    handleClear() {
      this.searchKeyword = "";
      // 可以在这里添加其他清空逻辑
    },
    // 回退到默认位置（沈阳）
    setMapCenterToDefault() {
      if (this.map) {
        this.map.setCenter([123.431479, 41.805689]);
      }
    },
  },
};
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 450px;
  
}

.search-box {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  gap: 10px;
  width: 400px;
}

.search-box input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-box button {
  padding: 0 20px;
  background-color: #1e88e5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-result {
  position: absolute;
  top: 60px;
  left: 20px;
  z-index: 100;
  width: 400px;
  max-height: 300px;
  overflow-y: auto;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-result ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-result li {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.search-result li:hover {
  background-color: #f5f5f5;
}

.map {
  width: 100%;
  height: 100%;
}
</style>
